# 动效开发 5:SVG 动画
CSS3 动画已然足够强大,不过还是有一些它做不到的地方,例如轨迹(路径)动画的实现。配合 SVG,可以让 Web 动效有更多的可能性。
# 案例实战 - 实现一个购物袋的 loading 动效
下面以一个购物袋的 loading 动效为示例,带领大家上手 SVG 动画。

其中旋转通过 CSS 来完成,但是旋转之后圆弧缩短变成笑脸的嘴巴需要借助 SVG 来实现。
# 步骤 1 - 声明 SVG 视窗
<svg width="100" height=“100”></svg>
@前端进阶之旅: 代码已经复制到剪贴板
指定一个宽高都为 100 像素的区域,width="100" 和 width="100px" 是等价的,当然也可以使用其他的合法单位,例如 cm、mm、em 等。
阅读器会设置一个默认的坐标系统,见下图:左上角为原点,其中水平(x)坐标向右递增,垂直(y)坐标向下递增。

在没有指定的情况下,所有数值的默认单位都是像素。
# 步骤 2 - 绘制购物袋
购物袋由两个部分组成,先画下面的主体:
<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />
@前端进阶之旅: 代码已经复制到剪贴板
任何形状都可以使用路径元素画出,描述轮廓的数据放在它的 d 属性中。
-
样式中的
fill用来设置填充色 -
路径数据由命令和坐标构成
指令
说明
M 20 40
表示移动画笔到 (20,40)
L 80 40
表示绘制一条线到 (80, 40)
A 10 10 90 0 1 70 100
绘制一个椭圆弧
圆弧命令以字母 A 开始,后面紧跟着 7 个参数,这 7 个参数分别用来表示:
- 椭圆的 x 半径和 y 半径
- 椭圆的 x 轴旋转角度
- 圆弧的角度小于 180 度,为 0;大于或等于 180 度,则为 1
- 以负角度绘制为 0,否则为 1
- 终点的x、y坐标

接下来绘制购物袋上面的部分:
<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” />
@前端进阶之旅: 代码已经复制到剪贴板
上面的部分是一个半圆弧,同样用路径来画出,当然也可以使用基础形状来完成。
样式中的 stoke 和 stroke-width 分别用来设置描边色和描边的宽度。

# 步骤 3 - 绘制眼睛
<circle cx=“40" cy="60" r="2.5" style="fill: #fff;" />
<circle cx="60" cy="60" r="2.5" style="fill: #fff;" />
@前端进阶之旅: 代码已经复制到剪贴板
使用基础形状,画两个小圆点。四个属性分别是位置坐标、半径和填充
